<template>
    <div class="container yuan-container pointsSetting">
        <a-spin tip="Loading..." :spinning="loading">
            <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                <div class="form-panel yuan-form-col3">
                    <div class="form-panel-box">
                        <div class="form-title">积分邀请规则</div>

                        <div style="border:solid 1px #eee;padding:5px 10px;margin-top:10px" v-for="item in integralConfigList"
                            :key="item.id">
                            <div class="c-primary">{{item.way}}：</div>
                            <a-form-model-item class="yuan-form-row" label="邀请用户数量限制" prop="issueType">
                                <a-radio-group v-model="item.unlimited">
                                    <a-radio :value="true">无限制 </a-radio>
                                    <a-radio :value="false">
                                        <span>限制数量 </span>
                                        <span v-show="item.unlimited===false">
                                            <a-input class="yuan-form-input" style="width:100px" placeholder="请输入数量"
                                                v-model="item.limitNum"></a-input>
                                        </span>

                                    </a-radio>

                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-item" label="获取积分节点" prop="integralNum">
                                <a-select class="yuan-form-input" v-model="item.integralNode" allowClear placeholder="获取积分节点">
                                    <!-- <a-select-option value="1">分享获取</a-select-option> -->
                                    <a-select-option :value="2" v-if="item.way==='邀请链接分享'">注册成功获取</a-select-option>
                                    <a-select-option :value="3" v-if="item.way==='商品链接分享'">购买成功获取</a-select-option>
                                </a-select>

                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="发起人获取积分数量" prop="integralNum">
                                <a-input class="yuan-form-input" placeholder="请输入积分数量"
                                    v-model="item.initiatorGainIntegralNum"></a-input>

                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="邀请人获取积分数量" prop="integralNum">
                                <a-input class="yuan-form-input" placeholder="请输入积分数量"
                                    v-model="item.inviterGainIntegralNum"></a-input>

                            </a-form-model-item>
                        </div>
                    </div>

                </div>
                <div class="form-panel yuan-form-col3">
                    <div class="form-panel-box">
                        <div class="form-title">积分签到规则</div>
                        <div style="padding:10px 0;width:600px;position:relative">
                            <span>当前月份：{{nowSignMonth.month}} 当前每日积分数量：{{nowSignMonth.dailyIntegralNum}} </span>
                            <a-button type="primary" @click="addSignMonth" style="position:absolute;right:0;top:0">新增</a-button>
                        </div>
                        <div class="table">
                            <a-table bordered :loading="loading" :rowKey="(item,i)=>'sign_'+i" :columns="columns"
                                :data-source="pageList" :pagination="false">
                                <template slot='action' slot-scope="text, record, index">
                                    <div>
                                        <span class="tab-act c-primary" @click="clickSignDetail(record,index)"
                                            v-if="record.month>nowMonth">编辑</span>
                                    </div>
                                </template>
                            </a-table>
                        </div>
                    </div>

                </div>
                <div class="form-panel yuan-form-col3">
                    <div class="form-panel-box">
                        <div class="form-title">商品交易积分规则</div>
                        <a-form-model-item class="yuan-form-row" label="" prop="goodsTradeRuleType">
                            <a-radio-group v-model="formData.goodsTradeRule.ruleType">
                                <a-radio :value="1">
                                    <span>
                                        订单交易金额限制
                                        <a-tooltip>
                                            <template slot="title">
                                                根据下单金额，达标后获得指定积分数量。
                                            </template>
                                            <span class="iconfont">&#xec72;</span>
                                        </a-tooltip>
                                    </span>
                                    <span v-show="formData.goodsTradeRule.ruleType===1" style="margin-left:50px">
                                        <span>订单限制金额(元)：</span>
                                        <a-input class="yuan-form-input" style="width:150px" placeholder="0和空表示无限制"
                                            v-model="formData.goodsTradeRule.limitAmount"></a-input>
                                        <span style="margin-left:30px">获得积分数量：</span>
                                        <a-input class="yuan-form-input" style="width:150px" placeholder="输入积分数量"
                                            v-model="formData.goodsTradeRule.integralNum"></a-input>
                                    </span>
                                </a-radio>
                                <div></div>
                                <a-radio :value="2">
                                    <span>
                                        订单交易比例限制
                                        <a-tooltip>
                                            <template slot="title">
                                                根据下单金额，按指定比例获得积分。
                                            </template>
                                            <span class="iconfont">&#xec72;</span>
                                        </a-tooltip>
                                    </span>

                                    <span v-show="formData.goodsTradeRule.ruleType===2" style="margin-left:50px">
                                        <span>获得积分比例：</span>
                                        <a-input class="yuan-form-input" style="width:150px" placeholder="积分比例"
                                            v-model="formData.goodsTradeRule.orderRatio"></a-input>
                                        <span> %</span>
                                        <span style="margin-left:30px">例：当比例为10%，订单金额为100.00元时，积分数量为10积分</span>
                                    </span>
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </div>

                </div>
                <div class="form-panel yuan-form-col3">
                    <div class="form-panel-box">
                        <div class="form-title">机构交易积分规则</div>
                        <a-form-model-item class="yuan-form-item" label="交易金额限制(元)" prop="offlineMallRuleLimitAmount">
                            <a-input class="yuan-form-input" placeholder=""
                                v-model="formData.offlineMallRule.limitAmount"></a-input>
                            <div class="c-danger">0和空表示没有限制</div>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="获取积分数量" prop="offlineMallRuleIntegralNum">
                            <a-input class="yuan-form-input" placeholder="积分数量"
                                v-model="formData.offlineMallRule.integralNum"></a-input>

                        </a-form-model-item>

                    </div>

                </div>
                <div style="margin-top:30px;margin-left:300px">
                    <a-button @click="clickSave" type="primary">
                        确认保存
                    </a-button>
                </div>
            </a-form-model>
        </a-spin>

        <a-modal width="800px" title="修改签到获取积分" :visible="signVisible" @cancel="signVisible=false" class="yuan-container">
            <a-spin tip="Loading..." :spinning="loading">
                <a-form-model class="yuan-form" layout="inline" :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                    <div class="form-panel yuan-form-col3">
                        <a-form-model-item class="yuan-form-item" label="年月">
                            <span class="yuan-form-input">{{signEditInfo.month}}</span>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="每日签到积分">
                            <a-input class="yuan-form-input" placeholder="请输入积分数量"
                                v-model="signEditInfo.dailyIntegralNum"></a-input>
                        </a-form-model-item>
                    </div>
                </a-form-model>

            </a-spin>
            <template slot="footer">
                <a-button @click="agencyListVisible=false">取消</a-button>
                <a-button type="primary" @click="clickSaveSign">保存</a-button>
            </template>
        </a-modal>

    </div>

</template>
<script lang="ts">
import api from "@/api/api";
import platformApi from "@/api/platformApi";
import { format, toFen, toYuan } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    formData: any = {
        goodsTradeRule: {},
        offlineMallRule: {},
    };
    rules = {};
    nowMonth = "";
    nowSignMonth = {};
    async mounted() {
        const nowTime = new Date().getTime();
        this.nowMonth = format(nowTime, "yyyy-MM");
        await this.getIntegralConfigList();
        this.getData();
    }
    integralConfigList = [];
    async getIntegralConfigList() {
        this.loading = true;
        try {
            const res = await platformApi.getIntegralConfigList();
            this.integralConfigList = res.data;
        } finally {
            this.loading = false;
        }
    }
    async getData() {
        this.loading = true;
        try {
            const res = await platformApi.integralRuleManageGetConfig();
            res.data.goodsTradeRule=res.data.goodsTradeRule?res.data.goodsTradeRule:{}
            res.data.offlineMallRule=res.data.offlineMallRule?res.data.offlineMallRule:{}

            res.data.goodsTradeRule.limitAmount =  toYuan(res.data.goodsTradeRule.limitAmount || 0) ;
            res.data.offlineMallRule.limitAmount = toYuan(res.data.offlineMallRule.limitAmount || 0);
            res.data.goodsTradeRule.ruleType = res.data.goodsTradeRule.ruleType || 1;
            this.formData = res.data;
            const signRules = res.data.signRules;

            const nowSignMonth = signRules.find((item) => {
                return item.month === this.nowMonth;
            });
            if(nowSignMonth){
                this.nowSignMonth = nowSignMonth;
            }else{
               signRules.push({
                    dailyIntegralNum: signRules[signRules.length - 1].dailyIntegralNum,
                    month: this.nowMonth,
                }); 
            }

            const nextMonth = this.getNextMonth(this.nowMonth);
            const signNextMonth = signRules.find((item) => {
                return item.month === nextMonth;
            });
            if (!signNextMonth) {
                signRules.push({
                    dailyIntegralNum: signRules[signRules.length - 1].dailyIntegralNum,
                    month: nextMonth,
                });
            }
            this.pageList = signRules;
        } finally {
            this.loading = false;
        }
    }
    getNextMonth(preDate) {
        const now = new Date(preDate);
        // 处理12月的情况，年份+1
        const nextMonth =
            now.getMonth() === 11 ? new Date(now.getFullYear() + 1, 0, 1) : new Date(now.getFullYear(), now.getMonth() + 1, 1);

        const year = nextMonth.getFullYear();
        const month = String(nextMonth.getMonth() + 1).padStart(2, "0");

        return `${year}-${month}`;
    }
    async clickSave() {
        this.loading = true;
        try {
            await platformApi.putIntegralConfigList(this.integralConfigList);

            const goodsTradeRule = {
                ...this.formData.goodsTradeRule,
                unlimited:false,
                orderRatio: this.formData.goodsTradeRule.orderRatio || 0,
                limitAmount: toFen(this.formData.goodsTradeRule.limitAmount || 0),
            };
            const offlineMallRule = {
                ...this.formData.offlineMallRule,
                unlimited:false,
                limitAmount: toFen(this.formData.offlineMallRule.limitAmount || 0),
            };

            await platformApi.putIntegralRuleManage({
                signRules: this.pageList,
                goodsTradeRule: goodsTradeRule,
                offlineMallRule: offlineMallRule,
            });

            this.$message.success("保存成功");
            await this.getIntegralConfigList();
            await this.getData();
        } finally {
            this.loading = false;
        }
    }
    pageList: any[] = [];
    columns = [
        {
            align: "center",
            dataIndex: "month",
            key: "month",
            title: "月份",
        },
        {
            align: "center",
            dataIndex: "dailyIntegralNum",
            key: "dailyIntegralNum",
            title: "每日积分数量",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 230,
            scopedSlots: { customRender: "action" },
        },
    ];
    signVisible = false;
    signEditInfo: any = {};
    signEditIdx = -1;
    clickSignDetail(item, idx) {
        this.signEditInfo = {
            dailyIntegralNum: item.dailyIntegralNum,
            month: item.month,
        };
        this.signEditIdx = idx;
        this.signVisible = true;
    }
    clickSaveSign() {
        if (!this.signEditInfo.dailyIntegralNum) {
            this.signEditInfo.dailyIntegralNum = 0;
        }
        this.signVisible = false;
        this.pageList[this.signEditIdx] = this.signEditInfo;
    }
    addSignMonth() {
        const preMonth = this.pageList[this.pageList.length - 1];

        const nextMonth = this.getNextMonth(preMonth.month);
        this.pageList.push({
            dailyIntegralNum: preMonth.dailyIntegralNum,
            month: nextMonth,
        });
    }
}
</script>
<style scoped lang="scss">
.pointsSetting {
    .table {
        width: 600px;
    }
}
</style>
